<template>
    <div>
        <el-carousel indicator-position="none" :autoplay="false" arrow="always" :interval="100000" v-if="readyShow"
                     @change="pageChange">
            <el-carousel-item v-for="pdf, index in pdfList" :key="index">
                <canvas :id="pdf.id"></canvas>
            </el-carousel-item>
        </el-carousel>
        <div style="margin-top: 5%; text-align: center">
            <span>{{pageIndex}}/{{pageTotal}}</span>
        </div>
    </div>
</template>

<script>
    import util from 'assets/js/util'
    import pdf from 'vue-pdf'

    export default {
        data() {
            return {
                readyShow: false,
                pdfList: [],
                pageIndex: 0,
                pageTotal: 0,
                pdf: null,
                index: 1,
                scale: 0.1,
                pageRendering: false,
                pageNumPending: null,
            }
        },
        props: [
            'url'
        ],
        mounted() {
            const _self = this;
            let loadingTask = pdf.createLoadingTask(_self.url);
            loadingTask.then(_pdf => {
                _self.pdf = _pdf;
                for (let i = 1; i <= _pdf.numPages; i++) {
                    _self.pdfList.push({id: 'pdf' + i});
                }
                _self.pageTotal = _pdf.numPages;
                _self.pageIndex = 1;
                _self.readyShow = true;
                for (let i = 1; i <= _pdf.numPages; i++) {
                    _self.findPage(i);
                }
            });
        },
        methods: {
            findPage: function (index) {
                const _self = this;
                let id = `pdf` + index;
                setTimeout(function () {
                    let canvas = document.getElementById(id);
                    if (canvas === undefined || canvas === null)
                        _self.findPage(index);
                    else
                        _self.renderPage(index, canvas);

                }, 500);
            },
            renderPage: function (index, canvas) {
                const _self = this;
                let screenWidth = document.documentElement.clientWidth * 0.8;
                let screenHeight = document.documentElement.clientHeight * 0.55;
                let ctx = canvas.getContext('2d');
                _self.pageRendering = true;
                // 通过promise获得pdf指定页面
                _self.pdf.getPage(index).then(page => {
                    let widthScale = screenWidth / page.view[2];
                    let heightScale = screenHeight / page.view[3];
                    let scale = widthScale > heightScale ? heightScale : widthScale;
                    let viewport = page.getViewport(scale);
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    // 将pdf渲染到canvas中
                    let renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            },
            pageChange: function (index) {
                this.pageIndex = index + 1;
            }
        }
    }
</script>

<style>
    .el-carousel__container {
        height: 400px;
    }
</style>
